import React, { useEffect, useState } from 'react'
import { Col, Row, Card, Table } from 'antd'
import dayjs from 'dayjs'
import './index.less'
import { getData } from '../../api'
import * as Icon from '@ant-design/icons'
import MyEcharts from '../../components/Echarts'
import { ColumnProp, CountDataProp, EchartsProp, IconName } from './types'

// table列的数据
const columns: ColumnProp[] = [
  {
    title: '课程',
    dataIndex: 'name'
  },
  {
    title: '今日购买',
    dataIndex: 'todayBuy'
  },
  {
    title: '本月购买',
    dataIndex: 'monthBuy'
  },
  {
    title: '总购买',
    dataIndex: 'totalBuy'
  }
]
// 订单统计的数据
const countData: CountDataProp[] = [
  {
    "name": "今日支付订单",
    "value": 1234,
    "icon": "CheckCircleOutlined",
    "color": "#f7e709"
  },
  {
    "name": "今日收藏订单",
    "value": 3421,
    "icon": "ClockCircleOutlined",
    "color": "#d080ff"
  },
  {
    "name": "今日未支付订单",
    "value": 1234,
    "icon": "CloseCircleOutlined",
    "color": "#65f3a5"
  },
  {
    "name": "本月支付订单",
    "value": 1684,
    "icon": "CheckCircleOutlined",
    "color": "#2ec7c9"
  },
  {
    "name": "本月收藏订单",
    "value": 3051,
    "icon": "ClockCircleOutlined",
    "color": "#ffb980"
  },
  {
    "name": "本月未支付订单",
    "value": 1739,
    "icon": "CloseCircleOutlined",
    "color": "#5ab1ef"
  }
]

// 动态获取icon
const iconToElement = (name: IconName) => React.createElement(Icon[name])

export default function Home() {
  const userImg = require('../../assets/images/user.png')
  const currentTime = dayjs(new Date()).format('YYYY-MM-DD HH:mm')

  // 创建echarts响应数据
  const [echartData, setEchartData] = useState<EchartsProp>({})

  // dom首次渲染完成
  useEffect(() => {
    getData().then(({ data }) => {
      const { tableData, orderData, userData, videoData } = data.data
      setTableData(tableData)
      // 对于echarts数据的组装
      const order = orderData
      // x轴的数据
      const xData = order.date
      // series数据组装
      const keyArray = Object.keys(order.data[0])
      const series: Record<string,any>[] = []
      keyArray.forEach(key => {
        series.push({
          name: key,
          data: order.data.map((item:Record<string,any>) => item[key]),
          type: 'line'
        })
      })
      setEchartData({
        order: {
          xData,
          series
        },
        user: {
          xData: userData.map((item:Record<string,any>) => item.date),
          series: [
            {
              name: '新增用户',
              data: userData.map((item:Record<string,any>) => item.new),
              type: 'bar'
            },
            {
              name: '活跃用户',
              data: userData.map((item:Record<string,any>) => item.active),
              type: 'bar'
            },
          ]
        },
        video: {
          series: [
            {
              data: videoData,
              type: 'pie'
            }
          ]
        }
      })
    })
  }, [])

  // 定义table数据
  const [tableData, setTableData] = useState([])

  return (
    <div>
      <Row className='home'>
        <Col span={8}>
          <Card hoverable style={{ marginBottom: "20px" }}>
            <div className='user'>
              <img src={userImg} alt="用户头像" />
              <div className='userinfo'>
                <p className="name">Admin</p>
                <p className="access">超级管理员</p>
              </div>
            </div>
            <div className='login-info'>
              <p>上次登录时间: <span>{currentTime}</span></p>
              <p>上次登录地点: <span>成都</span></p>
            </div>
          </Card>
          <Card hoverable>
            <Table rowKey={"name"} pagination={false} columns={columns} dataSource={tableData} />
          </Card>
        </Col>
        <Col span={16}>
          <div className="num">
            {
              countData.map((item, index) => {
                return (
                  <Card key={index} hoverable>
                    <div className="icon-box" style={{ background: item.color }}>
                      {iconToElement(item.icon)}
                    </div>
                    <div className="detail">
                      <p className="num">￥ {item.value}</p>
                      <p className='txt'>{item.name}</p>
                    </div>
                  </Card>
                )
              })
            }
          </div>
          {echartData.order && <MyEcharts chartData={echartData.order} style={{ height: "280px" }} />}
          <div className='graph'>
            {echartData.user && <MyEcharts chartData={echartData.user} style={{ height: "240px", width: '50%' }} />}
            {echartData.video && <MyEcharts chartData={echartData.video} isAxisChart={false} style={{ height: "260px", width: '50%' }} />}
          </div>
        </Col>
      </Row>
    </div>
  )
}
